<template>
  <div>
    <Row>
      <Col span="24">
        <div style="height: 100%; overflow-y: scroll; overflow-x: hidden">
          <BasicTree
            checkable
            :treeData="permissionData"
            :toolbar="true"
            :search="true"
            :title="t('routes.components.permissionModal.permissionSetting')"
          />
        </div>
      </Col>
    </Row>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { Row, Col } from 'ant-design-vue';
  import { BasicTree } from '/@/components/Tree/index';
  import { useI18n } from '/@/hooks/web/useI18n';

  const { t } = useI18n();

  const permissionData = ref([
    {
      title: 'parent 1',
      key: '0-0',
      icon: 'home|svg',
      children: [
        { title: 'leaf', key: '0-0-0' },
        {
          title: 'leaf',
          key: '0-0-1',
          children: [
            { title: 'leaf', key: '0-0-0-0' },
            { title: 'leaf', key: '0-0-0-1' },
          ],
        },
      ],
    },
    {
      title: 'parent 2',
      key: '1-1',
      icon: 'home|svg',
      children: [
        { title: 'leaf', key: '1-1-0' },
        { title: 'leaf', key: '1-1-1' },
      ],
    },
    {
      title: 'parent 3',
      key: '2-2',
      icon: 'home|svg',
      children: [
        { title: 'leaf', key: '2-2-0' },
        { title: 'leaf', key: '2-2-1' },
      ],
    },
  ]);
</script>

<style scoped></style>
